<!-- 项目案例卡片 -->
<template>
  <div class="box" :style="{ width: cardWidth + 'px', height: cardHeight + 'px' }" @click.stop="onClickCard(data)">
    <div class="box-content">
      <div class="head">
        <div class="head-up">
          <div class="left-title">
            <span class="truncate title-text" :title="data?.projectName">{{ data?.projectName }}</span>
          </div>
          <div class="head-right">
            <div class="collect">
              <collect-button
                :msg="collectButtonCancelMsg"
                :show-default-text="false"
                :default-status="data?.favorite"
                :favorite-obj-type="2"
                :favorite-obj-name="data?.projectName"
                :favorite-obj-id="data?.id"
                @on-click="setCollect"
                @click-ok="ok"
              />
            </div>
          </div>
        </div>
        <div class="label-group">
          <template v-for="(item, index) in data?.projectLabelInfoVOS" :key="index">
            <div v-if="index < showLabelNumber" class="base-label label-text elliptical-1" :title="item.labelName">
              {{ item.labelName }}
            </div>
            <a-popover v-else-if="index === showLabelNumber" placement="rightTop">
              <template #content>
                <div class="bottom-tooltip">
                  <div v-for="(t, n) in data?.projectLabelInfoVOS?.slice(showLabelNumber, data?.projectLabelInfoVOS.length)" :key="n">
                    <div class="base-label tooltip-label-text" :title="t.labelName">{{ t.labelName }}</div>
                  </div>
                </div>
              </template>
              <div class="base-label label-text">...</div>
            </a-popover>
          </template>
        </div>
        <div class="head-down" :title="data?.description">{{ data?.description }}</div>
      </div>
    </div>
    <img class="hover-svg" src="@/assets/img/item-case/card-hover.svg" />
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue'

  import CollectButton from '../CollectButton/index.vue'

  export interface LabelList {
    id: string
    labelId: string
    labelName: string
    projectId: string
  }
  export interface CaseCardData {
    id?: string //id
    projectName?: string //卡片名称
    favorite?: boolean //卡片收藏状态
    description?: string //卡片描述
    projectLabelInfoVOS?: Array<LabelList> //卡片标签
  }
  export interface DataSetCardProps {
    data?: CaseCardData | null //卡片数据
    cardWidth?: number //卡片宽度
    cardHeight?: number //卡片高度
    collectButtonCancelMsg?: string
  }
  let props = withDefaults(defineProps<DataSetCardProps>(), {
    data: () => {
      return {
        id: '',
        projectName: '',
        favorite: false,
        description: '',
        projectLabelInfoVOS: []
      }
    },
    cardWidth: 259.2,
    cardHeight: 132,
    collectButtonCancelMsg: '是否取消收藏此项目？'
  })
  let emits = defineEmits(['onClick', 'onCollect', 'okCancel'])
  const omitTitle = ref<Array<LabelList>>([])
  const showLabelNumber = ref<number>(3)
  const onClickCard = (item: CaseCardData | null) => {
    emits('onClick', item)
  }
  // 确认取消
  const ok = () => {
    emits('okCancel')
  }
  /**
   *  两个方法，一个是进行数据集的收藏和取消
   * */
  const setCollect = (collectImgStatus: boolean) => {
    console.log('setCollect')

    emits('onCollect', collectImgStatus)
  }
  const getBeyondTitle = () => {
    if (props.data?.projectLabelInfoVOS) {
      let LABEL_LIST_LENGTH = props.data.projectLabelInfoVOS.length
      let sumName: Array<LabelList> = []
      if (props.data.projectLabelInfoVOS.length > showLabelNumber.value) {
        for (let i = showLabelNumber.value; i < LABEL_LIST_LENGTH; i++) {
          sumName.push(props.data.projectLabelInfoVOS[i])
        }
      }
      omitTitle.value = sumName
    }
  }
  onMounted(() => {
    getBeyondTitle()
  })
</script>
<style lang="less" scoped>
  .box {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    padding: 16px 20px;
    background-color: #fff;
    border: 1px solid #e8e8eb;
    border-radius: 10px;
    transition: all 0.2s;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;

    .box-example {
      position: absolute;
      top: 15.304px;
      left: 0;
      width: 3px;
      height: 22.957px;
      background: var(--primary-3, #d1205e);
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }

    .box-content {
      align-self: stretch;
      position: relative;
      z-index: 5;
    }

    .head {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      align-self: stretch;

      .head-up {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;

        .left-title {
          display: flex;
          align-items: center;
          height: 24px;
          gap: 8px;

          .title-img {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 8px;
            width: 20px;
            height: 20px;
            background: #f5f5f5;
            border-radius: 50%;
          }

          .title-text {
            width: 260px;
            font-size: 16px;
            color: rgba(21, 23, 27, 0.95);
            line-height: 26px;
            font-weight: 500;
          }
        }

        .head-right {
          display: flex;
          align-items: center;
          gap: 8px;

          .collect,
          .load {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 18px;
            font-size: 18px;
            border-radius: 6px;
            gap: 6px;
          }
        }
      }

      .label-group {
        display: flex;
        justify-content: flex-start;
        margin: 12px 0;
        width: 100%;
        height: 26px;
        flex-wrap: nowrap;
        gap: 8px;
      }

      .head-down {
        height: 44px;
        font-size: 14px;
        color: rgba(25, 25, 48, 0.75);
        line-height: 22px; /* 166.667% */
        .elliptical-2();
      }
    }

    .hover-svg {
      position: absolute;
      right: 0;
      bottom: -14px;
      z-index: 1;
      display: none;
      width: 91px;
      height: 98px;
      transition: all 0.2s;
    }

    &:hover {
      box-shadow: 0 2px 16px 0 rgba(24, 104, 233, 0.12);

      .head-up {
        .left-title {
          .title-text {
            color: @primary1;
          }
        }
      }

      .hover-svg {
        display: block;
      }
    }
  }

  .base-label {
    /* display: flex; */
    align-items: center;
    padding: 3px 6px;
    height: 26px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    gap: 6px;
  }

  .label-text {
    overflow: hidden;
    width: max-content;
    min-width: 20px;
    font-size: 12px;
    color: #8599bf;
    font-weight: 400;
    line-height: 20px;
  }

  .tooltip-label-text {
    font-size: 12px;
    color: #8599bf;
    font-weight: 400;
    line-height: 20px; /* 166.667% */
    .elliptical-1();
  }

  .bottom-tooltip {
    display: flex;
    align-items: flex-start;
    max-width: 688px;
    flex-wrap: wrap;
    gap: 6px;
  }
</style>
